<template>
	<view class="shop-card">
		<checkbox-group>
			<view class="list-cell">
				<label class="checkbox">
					<checkbox :checked="boxChecked" @click="handleChange(index)" activeBorderColor="#d1d1d1" />
				</label>
				<view class="image">
					<image :src="list.img" mode="aspectFill"></image>
				</view>
				<view class="right-content">
					<view class="header">
						<view class="name">{{ list.name }}</view>
						<view class="del" @click="handleDelete">
							<image src="/static/icons/delete.png" mode="aspectFill" class="image"></image>
						</view>
					</view>
					<view class="desc">{{ list.desc }}</view>
					<view class="price">
						<view class="price1">￥<text class="price2">{{ list.price * list.num }}</text></view>
						<view class="food-num">
							<view class="decrease btn" @click="handleChangeNum('decrease')">-</view>
							<view class="num">×{{ list.num }}</view>
							<view class="increase btn" @click="handleChangeNum('increase')">+</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<show-modal :showModal="showM" :option="modalOptions"></show-modal>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useShoppingCart } from '../../stores/shoppingCart';
import ShowModal from '../show-modal/show-modal.vue';
const store = useShoppingCart();

const boxChecked = ref(true);

// 父组件向子组件传递过来的函数
const emits = defineEmits(['sb'])

// 模态框显现或隐藏
const showM = ref(false);

// 模态框的配置选项
const modalOptions = {
	title: '删除商品',
	content: '确认删除该商品吗？',
	showCancel: '取消',
	confirmText: '清除',
	success: function (res) {
		if (res.confirm) {
			store.shopDelete(index)
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			});
		}

		// 不论点击确定还是取消，都关闭模态框
		showM.value = false
	}
}

// 父组件（购物车）获取数据
const { shopList, index } = defineProps({
	shopList: {
		type: Object,
		default: {}
	},
	index: {
		type: Number,
		default: 0
	}
})

// 单个商品数据
const list = ref(shopList)


const handleDelete = () => {
	showM.value = true
}

// 点击checkbox后，改变其是否选中，由于直接点击checkbox无法获取其是否被选中，所以添加新的点击事件
const handleChange = () => {
	boxChecked.value = !boxChecked.value;


	emits('sb')
};


// 添加/减少商品数量
const handleChangeNum = (str) => {
	if (str === 'increase') list.value.num++;
	else if (str === 'decrease') {
		if (list.value.num == 1) {
			handleDelete()
		} else {
			list.value.num--;
		}
	}
};






// 向外导出函数和数据
defineExpose({ boxChecked, shopList: list })
</script>
<style scoped lang="scss">
.shop-card {
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 40rpx;
	background-color: #fafafa;
	font-weight: 600;

	.card-check-all {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;

		.title {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
			justify-content: space-between;

			.text {
				font-size: 34rpx;
				font-weight: 600;
			}

		}

	}

	.list-cell {
		display: flex;
		gap: 20rpx;
		margin-bottom: 40rpx;

		.checkbox {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.image {
			width: 150rpx;
			height: 150rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.right-content {
			padding: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// width: 100%;
			// widt$uni-bg-color;
			flex-grow: 1;

			.header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.del {
					width: 32rpx;
					height: 32rpx;

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.desc {
				color: #666;
				font-size: 28rpx;
			}

			.price {
				display: flex;
				flex-direction: row;

				align-items: flex-end;
				justify-content: space-between;

				.price1 {
					.price2 {
						font-size: 36rpx;
					}
				}

				.food-num {
					display: flex;
					flex-direction: row;
					gap: 10rpx;
					align-items: center;

					.num {
						border: #d5d5d5 1.5px solid;
						padding: 3rpx;
						border-radius: 15rpx;
					}

					.btn {
						background-color: #666;
						border-radius: 100%;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 38rpx;
						color: #fff;
					}
				}
			}
		}
	}
}
</style>
<style></style>
